<template>
  <f7-page>
    <f7-navbar title="操作条" back-link></f7-navbar>

      <div class="tien-bar bg-white border-bottom">
        <div class='action'>
          <span class='tien-icon-title text-green'></span>
          <span>底部操作条</span>
        </div>
      </div>
      <div class='box'>
        <div class="tien-bar tabbar bg-white margin-bottom">
          <div class="action">
            <div class='tien-icon-image'>
              <img src='../assets/images/tabbar/basics_cur.png'>
            </div>
            <div class='text-green'>元素</div>
          </div>
          <div class="action">
            <div class='tien-icon-image'>
              <img src='../assets/images/tabbar/component.png'>
            </div>
            <div class='text-gray'>组件</div>
          </div>
          <div class="action">
            <div class='tien-icon-image'>
              <img src='../assets/images/tabbar/plugin.png'>
              <div class='tien-tag badge'>99</div>
            </div>
            <div class='text-gray'>扩展</div>
          </div>
          <div class="action">
            <div class='tien-icon-image'>
              <img src='../assets/images/tabbar/about.png'>
              <div class='tien-tag badge'></div>
            </div>
            <div class='text-gray'>关于</div>
          </div>
        </div>
        <div class="tien-bar tabbar margin-bottom-xl bg-black">
          <div class="action text-orange">
            <div class='tien-icon-homefill'></div> 首页
          </div>
          <div class="action text-gray">
            <div class='tien-icon-similar'></div> 分类
          </div>
          <div class="action text-gray">
            <div class='tien-icon-recharge'></div>
            积分
          </div>
          <div class="action text-gray">
            <div class='tien-icon-cart'>
              <div class='tien-tag badge'>99</div>
            </div>
            购物车
          </div>
          <div class="action text-gray">
            <div class='tien-icon-my'>
              <div class='tien-tag badge'></div>
            </div>
            我的
          </div>
        </div>
        <div class="tien-bar tabbar margin-bottom-xl bg-white">
          <div class="action text-green">
            <div class='tien-icon-homefill'></div> 首页
          </div>
          <div class="action text-gray">
            <div class='tien-icon-similar'></div> 分类
          </div>
          <div class="action text-gray add-action">
            <button class='tien-btn icon-add bg-green shadow'></button>
            发布
          </div>
          <div class="action text-gray">
            <div class='tien-icon-cart'>
              <div class='tien-tag badge'>99</div>
            </div>
            购物车
          </div>
          <div class="action text-gray">
            <div class='tien-icon-my'>
              <div class='tien-tag badge'></div>
            </div>
            我的
          </div>
        </div>
        <div class="tien-bar tabbar bg-black  margin-bottom">
          <div class="action text-green">
            <div class='tien-icon-homefill'></div> 首页
          </div>
          <div class="action text-gray">
            <div class='tien-icon-similar'></div> 分类
          </div>
          <div class="action text-gray add-action">
            <button class='tien-btn icon-add bg-green shadow'></button>
            发布
          </div>
          <div class="action text-gray">
            <div class='tien-icon-cart'>
              <div class='tien-tag badge'>99</div>
            </div>
            购物车
          </div>
          <div class="action text-gray">
            <div class='tien-icon-my'>
              <div class='tien-tag badge'></div>
            </div>
            我的
          </div>
        </div>

        <div class="tien-bar bg-white tabbar border shop  margin-bottom">
          <button class="action tien-btn" open-type='contact'>
            <div class='tien-icon-service text-green'>
              <div class='tien-tag badge'></div>
            </div>
            客服
          </button>
          <div class="action text-orange">
            <div class='tien-icon-favorfill'></div> 已收藏
          </div>
          <div class="action">
            <div class='tien-icon-cart'>
              <div class='tien-tag badge'>99</div>
            </div>
            购物车
          </div>
          <div class='bg-red submit'>立即订购</div>
        </div>

        <div class="tien-bar bg-white tabbar border shop  margin-bottom">
          <button class="action tien-btn" open-type='contact'>
            <div class='tien-icon-service text-green'>
              <div class='tien-tag badge'></div>
            </div>
            客服
          </button>
          <div class="action">
            <div class='tien-icon-cart'>
              <div class='tien-tag badge'>99</div>
            </div>
            购物车
          </div>
          <div class='bg-orange submit'>加入购物车</div>
          <div class='bg-red submit'>立即订购</div>
        </div>

        <div class="tien-bar bg-white tabbar border shop  margin-bottom">
          <button class="action tien-btn" open-type='contact'>
            <div class='tien-icon-service text-green'>
              <div class='tien-tag badge'></div>
            </div>
            客服
          </button>
          <div class="action">
            <div class=' icon-shop'></div> 店铺
          </div>
          <div class="action">
            <div class='tien-icon-cart'>
              <div class='tien-tag badge'>99</div>
            </div>
            购物车
          </div>
          <div class='btn-group'>
            <button class='tien-btn bg-red round shadow-blur'>立即订购</button>
          </div>
        </div>
        <div class="tien-bar bg-white tabbar border shop">
          <button class="action tien-btn" open-type='contact'>
            <div class='tien-icon-service text-green'>
              <div class='tien-tag badge'></div>
            </div> 客服
          </button>
          <div class="action">
            <div class='tien-icon-cart'>
              <div class='tien-tag badge'>99</div>
            </div>
            购物车
          </div>
          <div class='btn-group'>
            <button class='tien-btn bg-orange round shadow-blur'>加入购物车</button>
            <button class='tien-btn bg-red round shadow-blur'>立即订购</button>
          </div>
        </div>
      </div>

      <div class="tien-bar bg-white solid-bottom margin-top">
        <div class='action'>
          <span class='tien-icon-title text-green'></span>
          <span>标题操作条</span>
        </div>
      </div>
      <div class='box' >
        <div class="tien-bar justify-center bg-white margin-bottom">
          <div class='action border-title'>
            <span class='text-xl text-bold'>关于我们</span>
            <span class='bg-grey' style='width:2rem'></span>
            <!-- 底部样式 last-child选择器-->
          </div>
        </div>
        <div class="tien-bar justify-center bg-white margin-bottom">
          <div class='action border-title'>
            <span class='text-xl text-bold text-blue'>关于我们</span>
            <span class='bg-gradual-blue' style='width:3rem'></span>
          </div>
        </div>
        <div class="tien-bar justify-center bg-white margin-bottom">
          <div class='action sub-title'>
            <span class='text-xl text-bold text-green'>关于我们</span>
            <span class='bg-green' style='width:2rem'></span>
            <!-- last-child选择器-->
          </div>
        </div>
        <div class="tien-bar justify-center bg-white margin-bottom">
          <div class='action sub-title'>
            <span class='text-xl text-bold text-blue'>关于我们</span>
            <span class='text-ABC text-blue'>about</span>
            <!-- last-child选择器-->
          </div>
        </div>
      </div>
      <div class='box'>
        <div class="tien-bar bg-white margin-bottom">
          <div class='action border-title'>
            <span class='text-xl text-bold'>关于我们</span>
            <span class='bg-grey' style='width:2rem'></span>
            <!-- 底部样式 last-child选择器-->
          </div>
        </div>
        <div class="tien-bar bg-white margin-bottom">
          <div class='action border-title'>
            <span class='text-xl text-bold text-blue'>关于我们</span>
            <span class='bg-gradual-blue' style='width:3rem'></span>
          </div>
        </div>
        <div class="tien-bar bg-white margin-bottom">
          <div class='action sub-title'>
            <span class='text-xl text-bold text-green'>关于我们</span>
            <span class='bg-green'></span>
            <!-- last-child选择器-->
          </div>
        </div>
        <div class="tien-bar bg-white margin-bottom">
          <div class='action sub-title'>
            <span class='text-xl text-bold text-blue'>关于我们</span>
            <span class='text-ABC text-blue'>about</span>
            <!-- last-child选择器-->
          </div>
        </div>
        <div class="tien-bar bg-white margin-bottom">
          <div class='action title-style-3'>
            <span class='text-xl text-bold'>关于我们</span>
            <span class='text-Abc text-gray self-end margin-left-sm'>about</span>
          </div>
        </div>
        <div class="tien-bar bg-white margin-bottom">
          <div class='action'>
            <span class='tien-icon-title text-green'></span>
            <span class='text-xl text-bold'>关于我们</span>
          </div>
        </div>
        <div class="tien-bar bg-white">
          <div class='action'>
            <span class='tien-icon-titles text-green'></span>
            <span class='text-xl text-bold'>关于我们</span>
          </div>
        </div>
      </div>

      <div class="tien-bar bg-white solid-bottom margin-top">
        <div class='action'>
          <span class='tien-icon-title text-green'></span>
          <span>顶部操作条</span>
        </div>
      </div>
      <div class='box'>
        <div class="tien-bar bg-white margin-bottom">
          <div class='action'>
            <span class='tien-icon-back text-gray'></span> 返回
          </div>
          <div class='content text-bold'>
            操作条
          </div>
        </div>
        <div class="tien-bar bg-white margin-bottom">
          <div class='action'>
            <span class='tien-icon-homefill text-gray'></span> 首页
          </div>
          <div class='content text-bold '>
            鲜亮的高饱和色彩，专注视觉的小程序组件库
          </div>
          <div class='action'>
            <span class='tien-icon-cardboardfill text-grey'></span>
            <span class='tien-icon-recordfill text-red'></span>
          </div>
        </div>
        <div class="tien-bar bg-blue margin-bottom">
          <div class='action'>
            <span class='tien-icon-close'></span> 关闭
          </div>
          <div class='content text-bold'>
            海蓝
          </div>
        </div>
        <div class="tien-bar bg-black search margin-bottom">
          <div class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></div>
          <div class='content'>
            ColorUI
          </div>
          <div class='action'>
            <span class="icon-more"></span>
          </div>
        </div>
      </div>


      <div class="tien-bar bg-white">
        <div class='action'>
          <span class='tien-icon-title text-green'></span>
          <span>搜索操作条</span>
        </div>
      </div>
      <div class='box'>
        <div class="tien-bar search bg-white margin-bottom">
          <div class='search-form round'>
            <span class="icon-search"></span>
            <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
          </div>
          <div class='action'>
            <button class='tien-btn bg-green shadow-blur round'>搜索</button>
          </div>
        </div>
        <div class="tien-bar search bg-white margin-bottom">
          <div class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-2.jpg);"></div>
          <div class='search-form round'>
            <span class="icon-search"></span>
            <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
          </div>
          <div class='action'>
            <span>广州</span>
            <span class="icon-triangledownfill"></span>
          </div>
        </div>
        <div class="tien-bar bg-red search margin-bottom">
          <div class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-1.jpg);"></div>
          <div class='search-form radius'>
            <span class="icon-search"></span>
            <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
          </div>
          <div class='action'>
            <span>广州</span>
            <span class="icon-triangledownfill"></span>
          </div>
        </div>
        <div class="tien-bar bg-cyan search margin-bottom">
          <div class='search-form radius'>
            <span class="icon-search"></span>
            <input type="text" placeholder="搜索图片、文章、视频" confirm-type="search"></input>
          </div>
          <div class='action'>
            <span class='tien-icon-close'></span>
            <span>取消</span>
          </div>
        </div>
      </div>

      <div class="tien-bar bg-white solid-bottom margin-top">
        <div class='action'>
          <span class='tien-icon-title text-green'></span>
          <span>操作条按钮组</span>
        </div>
      </div>

      <div class='box'>
        <div class="tien-bar btn-group">
          <button class='tien-btn bg-green shadow-blur round lg'>保存</button>
        </div>
        <div class="tien-bar btn-group">
          <button class='tien-btn bg-green shadow-blur'>保存</button>
          <button class='tien-btn text-green line-green shadow'>上传</button>
        </div>
        <div class="tien-bar btn-group">
          <button class='tien-btn bg-green shadow-blur round'>保存</button>
          <button class='tien-btn bg-blue shadow-blur round'>提交</button>
        </div>
      </div>


      <div class="tien-bar bg-white solid-bottom margin-top">
        <div class='action'>
          <span class='tien-icon-title text-green'></span>
          <span>输入操作条</span>
        </div>
      </div>
      <div class='box'>
        <div class="tien-bar input margin-bottom">
          <div class='action'>
            <span class='tien-icon-sound text-grey'></span>
          </div>
          <input class='border'  maxlength="300" cursor-spacing="10"></input>
          <div class='action'>
            <span class='tien-icon-emojifill text-grey'></span>
          </div>
          <button class='tien-btn bg-green shadow-blur'>发送</button>
        </div>

        <div class="tien-bar input">
          <div class="cu-avatar round" style="background-image:url(https://image.weilanwl.com/img/square-3.jpg);"></div>
          <div class='action'>
            <span class='tien-icon-roundaddfill text-grey'></span>
          </div>
          <input class='solid-bottom' maxlength="300" cursor-spacing="10"></input>
          <div class='action'>
            <span class='tien-icon-emojifill text-grey'></span>
          </div>
          <button class='tien-btn bg-green shadow-blur'>发送</button>
        </div>
      </div>



  </f7-page>

</template>

<script>
import '../../css/colorui/bar.css';
import '../../css/colorui/form.css';
import '../../css/colorui/border.css';
import '../../css/colorui/text.css';
export default {
  name:'bar',
  data() {
    return {
      
    };
  },
  mounted() {
    
  },
  methods: {
    
    
  },
};
</script>

<style>
.box {  
  margin: 20rpx; 
}

</style>